<template>
    <div>
        <div class="recommend-title">热销推荐</div>
        <ul>
            <router-link 
              tag="li"
              class="item" 
              v-for="item of list" :key="item.id"
              :to="'/detail/' + item.id"
            >           
              <img class="item-img" :src="item.imgUrl" alt="">
              <div class="item-info">
                  <p class="item-title">{{item.title}}</p>
                  <p class="item-desc">{{item.desc}}</p>
                  <button class="item-button">查看详情</button>
              </div>
            </router-link>
        </ul>
    </div>
</template>
<script>
export default {
  name: 'HomeRecommend',
  props: {
    list: Array
  },
  data(){
      return {
          // recommendList: [{
          //     id: '0001',
          //     imgUrl: 'http://img1.qunarzz.com/sight/p0/1808/ad/adaf800a7a7b6d5ea3.img.jpg_250x250_33ee259a.jpg',
          //     title: '天津海昌极地海洋公园',
          //     desc: '浪漫天津首站，浪漫主题海洋公园'
          // },{
          //     id: '0002',
          //     imgUrl: 'http://img1.qunarzz.com/sight/p0/1912/29/29b245ad246e0a86a3.img.jpg_200x200_fed8690f.jpg',
          //     title: '天津欢乐谷',
          //     desc: '体验极致欢乐之旅'             
          // },{
          //     id: '0003',
          //     imgUrl: 'http://img1.qunarzz.com/sight/p0/1810/11/119749ef2454fda8a3.img.jpg_200x200_23c920ee.jpg',
          //     title: '天津杨柳青古镇',
          //     desc: '感受文化与艺术的完美结合'
          // }]
      }
  }
}
</script>
<style lang="stylus" scoped>
@import '../../../assets/styles/mixins.styl';

.recommend-title {
  margin-top: 0.2rem;
  line-height: 0.8rem;
  background-color: #eee;
  text-indent: 0.2rem;
}

.item {
  display: flex;
  height: 1.9rem;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
}

.item-img {
  width: 1.7rem;
  height: 1.7rem;
  padding: 0.1rem;
}

.item-info {
  flex: 1;
  min-width: 0;
}

.item-title {
  line-height: 0.54rem;
  font-size: 0.32rem;
  ellipsis();
}

.item-desc {
  line-height: 0.44rem;
  font-size: 0.28rem;
  color: #ccc;
  ellipsis();
}

.item-button {
  background: #ff9300;
  padding: 0.1rem;
  margin-top: 0.2rem;
  border-radius: 0.06rem;
  color: #fff;
  font-weight: 700;
  line-height: 0.33rem;
}
</style>